 <template>
  <div class="b-s footer-ct">
    <div class="b-s flex-c footer-inner">
      <div class="b-s flex-c contact-ct">
          <img :src="middleImg" class="we-icon">
      </div>
      <div v-for="(oItem,index) in aFoot"
        :key="index"
        class="flex-c f-item"
        @click="changeTab(index)">
        <div class="img-ct">
          <img :src="iCurrent==index?oItem.himg:oItem.oimg" class="f-icon" v-if="oItem.himg">
        </div>
        <div :class="{'i-name':iCurrent==index,'f-39':true}">{{oItem.name}}</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      aRoutes: ['/home', '/socialinfo', '', '/about', '/mycenter'],
      aFoot: [
        {
          himg: require('../../../static/images/home-1.png'),
          oimg: require('../../../static/images/home-0.png'),
          name: '首页'
        },
        {
          himg: require('../../../static/images/fee-1.png'),
          oimg: require('../../../static/images/fee-0.png'),
          name: '社保缴费'
        },
        {
          himg: '',
          oimg: '',
          name: '客服在线'
        },
        {
          himg: require('../../../static/images/menu-1.png'),
          oimg: require('../../../static/images/menu-0.png'),
          name: '服务大厅'
        },
        {
          himg: require('../../../static/images/my-1.png'),
          oimg: require('../../../static/images/my-0.png'),
          name: '个人中心'
        }
      ],
      iCurrent: 0, // 当前选中
      middleImg: require('../../../static/images/contact-1.png')
    }
  },
  props: ['aFoots', 'isShowArr'],
  watch: {
    iCurrent: function (val) {},
    $route (to, from) {}
  },
  mounted () {
    let routePath = this.$route.path

    this.iCurrent = this.aRoutes.indexOf(routePath)
  },
  methods: {
    /**
     * 切换顶部tab
     */
    changeTab (sIndex) {
      let _This = this
      let {aRoutes} = _This
      _This.iCurrent = sIndex
      let proute = aRoutes[sIndex]
      _This.navTo(proute)
      this.$emit('changeTab', sIndex)
    },
    /**
     * 切换箭头指向
     */
    fTransArr () {
      console.log('cheng arror--------')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/style/mixin";
.b-s {
  box-sizing: border-box;
}
.flex-c {
  display: flex;
  align-items: center;
}
.footer-ct {
  position: fixed;
  bottom: 0px;
  z-index: 1;
  width: 100%;
  .footer-inner {
    position: relative;
    font-size: cmSize(36);
    padding: cmSize(20) 0 0 0;
    box-shadow: 0 0 1px 1px #efefef;
    justify-content: space-around;
    background: #ffffff;
  }
  .contact-ct{
    position: absolute;
    width: cmSize(160);
    height: cmSize(160);
    border-radius: 50%;
    background: #ffffff;
    top: cmSize(-60);
    box-shadow: 0 0 1px 1px #efefef;
    justify-content: center;
    .we-icon{
      width: cmSize(160);
      height: cmSize(160);
      border-radius: 50%;
    }
  }
  .f-item {
    flex-direction: column;
    color: #666666;
    flex: 1 1 2rem;
    font-size: cmSize(36);
    .img-ct{
      height: cmSize(80);
    }
    .i-name {
      color: #5fb600;
    }
    .f-icon {
      width:cmSize(80);
      height: cmSize(80);
      border-radius: cmSize(4);
    }
  }
  .f-28{
    font-size: cmSize(36);
  }
}
</style>
